<template>
  <div class="user-wrapper">
    <div class="content-box">
      <a-button @click="clearDatabases">清空数据</a-button>
      <notice-icon class="action"/>
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <span>{{ nickname() }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item :key="index" v-for="(row, index) in messageList()">
            <a href="javascript:;" @click="changeMged(row.id)">
              <a-icon type="database"/>
              <span>{{ row.name }}</span>
            </a>
          </a-menu-item>
          <a-menu-item key="1">
            <a href="javascript:;">
<!--              <a-icon type="edit"/>-->
              <span>{{userInfo().mobile}}</span>
            </a>
          </a-menu-item>
          <a-menu-item key="2">
            <a href="javascript:;" @click="editPassword">
              <a-icon type="edit"/>
              <span>修改密码</span>
            </a>
          </a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="3">
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout"/>
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <change-ar ref="ChangeAr" @ok="handleOk" />
    <a-modal title="请输入密码" destroyOnClose v-model="clearDatabaseModal" :width="600" @ok="submit" :confirmLoading="Loading">
      <a-form :form="clearDataForm">
        <a-form-item label="请输入密码" :labelCol="{xs:{span:24},sm:{span:7}}" :wrapperCol="{xs:{span:24},sm:{span:15}}">
          <a-input placeholder="请输入密码" v-decorator="['pwd',{rules:[{required:true,message:'请输入密码'}]}]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import NoticeIcon from '@/components/NoticeIcon'
import { mapActions, mapGetters } from 'vuex'
import ChangeAr from './ChangeAr'

export default {
  name: 'UserMenu',
  data(){
    return{
      Loading:false,
      clearDatabaseModal:false,
      clearDataForm:this.$form.createForm(this),
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  components: {
    NoticeIcon,
    ChangeAr
  },
  methods: {
    ...mapActions(['Logout', 'changeMg']),
    ...mapGetters(['nickname', 'messageList', 'nowMgName','token','userInfo']),
    handleLogout () {
      const that = this

      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk () {
          return that.Logout({}).then(() => {
            window.location.reload()
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel () {
        }
      })
    },
    changeMged (id) {
      this.changeMg(id)
      this.reload()
    },
    submit(e){
      e.preventDefault();
      this.Loading=true
      this.clearDataForm.validateFields((err, values) => {
          if (err) {
            for (let key in err) {
              for (let item of err[key]['errors']) return this.$message.warning(item['message'], 2)
            }
          }
        if(values.pwd=='123123!!@@'){
          this.axios({
              method:'post',
              url:'/index/clearDataBase',
              data:{token:this.token()}
          }).then(res => {
              this.Loading=false
              let { code,msg,data } = res;
              if(code === 0){
                  this.reload();
              }else this.$message.warning(msg);
          }).catch(err => {
              this.Loading=false
              this.$message.error('服务器发生错误...');
          })
        }else{
          this.$message.warning('输入的密码不正确！');
          this.Loading=false
        }

      })
    },
    clearDatabases(){
      this.clearDatabaseModal=true;

    },
    reload () {
      this.$nextTick(function () {
      })
    },
    handleOk () {
      this.reload()
    },
    editPassword() {
      this.$router.push({name:'data_user_edit_pwd'});
      // this.axios({
      //   method:'post',
      //   url:'',
      //   data:{token:this.token()}
      // })
    }
  }
}
</script>
<style lang="less">
  .arnames{
    margin-right: 20px;
  }
</style>
